<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>02_对象</title>
  </head>
  <body>
    <button id="btn">test</button>
    <script>
      /* 
      什么是对象?
      为什么要创建对象? / 什么时候需要创建对象?
      对象的组成?
      如何创建对象?
      */

      /* 
      对象是对现实事物的抽象
      它包含事物的状态(属性)和行为(方法)
      
      当属性值为函数时, 称之为方法
      */
      const person = {
        name: 'tom',
        age: 18,
        sayInfo () {
          console.log(`我叫${this.name}, 今年${this.age}`)
        }
      }
      console.log(console.log)
      console.log('abc'.toString)

      /* 
      为什么要创建对象? / 什么时候需要创建对象?
        方便对多个数据进行统一管理(传递/读/写)
      */
      // 当我们点击按钮时, 浏览器会自动分发一个点击事件出来, 并给我们传递点击事件相关的数据过来
      // 将所有相关数据, 封装成对象传递过来 => 事件对象 => 事件相关数据对象
      document.getElementById('btn').onclick = function (event) {
        console.log(event)
      }
      
      /* 
       对象的组成?
          包含n个属性和方法
      */
      function fn(obj) {
        
      }
      const obj1 = {m: 1, n: 'abc', x: {y: 3}}   // 一个对象永远不可能在另一个对象内部
      const a = 2
      fn(a)
      fn(obj1)

      /* 
      如何创建对象?
      对象字面量 / 数组字面量
      new 构造函数/类
      */
      const obj = {
        m: 1
      }
      function Person() {
        
      }
      new Person()
      function createPerson() {
        return {m: 1}
      }
      const p = createPerson()
      const obj2 = Object.create(obj) // 创建指定的对象的子对象

    </script>
  </body>
</html>
